<template>
    <h2>计算属性和监听</h2>
    <fieldset>
        <legend>姓名操作</legend>
        姓氏：<input type="text" v-model="user.firstName" placeholder="请输入姓氏"><br />
        名字：<input type="text" v-model="user.lastName" placeholder="请输入名字"><br />
    </fieldset>
    <fieldset>
        <legend>计算属性和监视的演示</legend>
        姓名<input type="text" placeholder="显示姓名" v-model="fullName1"><br />
        姓名<input type="text" placeholder="显示姓名" v-model="fullName2"><br />
        姓名<input type="text" placeholder="显示姓名" v-model="fullName3"><br />
    </fieldset>

</template>
<script lang="ts">
import {
    defineComponent,
    reactive,
    computed,
    watch,
    ref,
    watchEffect,
} from 'vue'
export default defineComponent({
    name: 'App',
    setup() {
        // 定义一个响应式的对象
        const user = reactive({
            firstName: '欧阳',
            lastName: '修',
        })
        // 通过计算属性的方式，实现第一个姓名的显示
        // vue3中的计算属性
        // 如果只传入一个函数，表示get

        // 第一个姓名
        // 返回的是一个ref类型的对象
        const fullName1 = computed(() => {
            return `${user.firstName}_${user.lastName}`
        })
        // console.log('fullName1:', fullName1)

        // 第二个姓名
        //
        const fullName2 = computed({
            get() {
                return `${user.firstName}_${user.lastName}`
            },
            set(val: string) {
                // console.log('======', val)
                const names = val.split('_')
                user.firstName = names[0]
                user.lastName = names[1]
            },
        })

        // 第三个姓名：
        const fullName3 = ref('')
        // 监视----指定的数据
        watch(
            user,
            ({ firstName, lastName }) => {
                fullName3.value = `${firstName}_${lastName}`
            },
            { immediate: true, deep: true }
        )

        // // 监视，不需要配置immediate，本身默认进行监视，（默认执行一次）
        // watchEffect(() => {
        //     fullName3.value = `${user.firstName}_${user.lastName}`
        // })

        // 监视fullName3，改变firstName和lastName
        watchEffect(() => {
            const names = fullName3.value.split('_')
            user.firstName = names[0]
            user.lastName = names[1]
        })

        // // watch ---可以监视多个数据
        // watch([user.firstName, user.lastName, fullName3], () => {
        //     // 这里的代码没有执行，fullName3是响应式数据，user.firstName, user.lastName不是响应式的
        //     console.log('===')
        // })

         // watch ---当监视非响应式的数据，需要改为回调函数的方式
         //  user.firstName, user.lastName不是响应式的
        watch([() =>user.firstName, ()=>user.lastName], () => {
        
            console.log('===')
        })
        return {
            user,
            fullName1,
            fullName2,
            fullName3,
        }
    },
})
</script>
<style>
</style>